<template>
  <div class="item_card">
    <div class="item_title">{{title}}</div>
    <div class="item_content">{{content}}</div>
    <img class="item_img1" alt="" :src="img1">
    <img class="item_img2" alt="" :src="img2">
  </div>
</template>

<script setup>
import { defineProps, ref, toRefs } from 'vue';

const props = defineProps({
  item: Object
})

const { item } = toRefs(props)

const title = ref(item.value.item_title)
const content = ref(item.value.item_content)
const img1 = ref(item.value.img1_src)
const img2 = ref(item.value.img2_src)



</script>

<style scoped>
.item_card{
  width: 51vh;
  height: 28vh;
  margin: 1vh;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.item_title{
  width: 45%;
  height: 12%;
  margin: 2%;
  padding-left: 2%;
  font-size: 24px;
  font-weight: 600;
}
.item_content{
  width: 40%;
  height: 8%;
  margin: 2%;
  font-size: 18px;
}
.item_img1{
  width: 45%;
  height: 60%;
  margin: 2%;
  object-fit: cover;
}
.item_img2{
  width: 45%;
  height: 60%;
  margin: 2%;
  object-fit: cover;
}
</style>